<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="https://at.alicdn.com/t/c/font_4233430_f91617ia5ju.css">
</head>
<body>
    <p>
        <input id="year" type="text" >
        <button id="btn">点击</button>
        <span id="result"></span>


        <!-- 
           字体图标: 既能以图片形式显示,又能通过字体相关属性控制 图片颜色 大小 
           对 <i class="iconfont icon-weixiao"></i>
           错 <i class="iconfont icon-chucuo"></i>
         -->
    </p>
</body>
<script>
    // 输入一个1000-9999的年数, 判断是否是闰年?
    // 普通闰年：公历年份是4的倍数，且不是100的倍数的，为闰年（如2004年、2020年等就是闰年）。
    // 世纪闰年：公历年份是整百数的，必须是400的倍数才是闰年（如1900年不是闰年，2000年是闰年）。

    // 四年一闰 百年不闰,  四百年在闰


    // 注意: 能改变元素的只有元素本身

    // innerText  获取和设置元素内的文本
    // innerHTML  获取和设置元素内的html结构(html标签 +  文本)

    var yearInp = document.getElementById("year");
    var btn = document.getElementById("btn");
    var resultSpan = document.getElementById("result");

    console.log(yearInp,btn,resultSpan);

    btn.onclick = function(){
        var year = yearInp.value; //取值: 变量year存储的输入框的value值

        // yearInp.value = 123123;  // 赋值:  将输入框的value值改为 "1231323"

        if(year){
            if(year >= 1000 && year <= 9999 && year % 1 == 0){
                if((year % 4 == 0 && year % 100 !=0) || year % 400 == 0){
                    resultSpan.innerText = year + "年,是闰年";
                    // resultSpan.innerHTML = '<i class="iconfont icon-weixiao"></i> 年份输入有误';
                    resultSpan.style.color = "green";
                }else{
                    resultSpan.innerText = year + "年,是平年";
                    // resultSpan.innerHTML = '<i class="iconfont icon-weixiao"></i> 年份输入有误';
                    resultSpan.style.color = "green";
                }
            }else{
                resultSpan.innerText = "请输入1000-9999之间的年份";
                // resultSpan.innerHTML = '<i class="iconfont icon-chucuo"></i> 年份输入有误';
                resultSpan.style.color = "red";
            }


        }else{
            resultSpan.innerText = "请输入年份";
            // resultSpan.innerHTML = '<i class="iconfont icon-chucuo"></i> 年份输入有误';
            resultSpan.style.color = "red";
        }






    }

    
   





</script>
</html>